<template>
  <div class="member-visit-record">
    <h1 class="block-title">访问会员</h1>
    <div class="record-list">
      <div class="record-item" v-for="(item, index) in memberList" :key="index">
        <img class="avatar" :src="item.avatar" alt="" />
        <div class="member-info">
          <div style="display: flex;">
            <span class="member-nickname van-ellipsis">{{ item.nickname }}</span>
            <span class="member-id">ID：{{ item.id }}</span>
          </div>
          <p class="visit-num">访问次数：{{ item.total }}</p>
          <p class="view-record" @click="toRecordDetail(item.id)">查看访问记录</p>
        </div>
        <div class="open-chat-btn" @click="emitChat(item.external_userid)">发起会话</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    memberList: {
      type: Array,
      default: () => []
    },
    currentTime: {
      type: Date
    }
  },
  data() {
    return {};
  },

  methods: {
    toRecordDetail(id) {
      this.$router.push(this.fun.getUrl("memberRecordDetail", { id }, { time: this.currentTime.getTime() }));
    },
    // 打开会话窗口
    emitChat(user_id) {
      this.$emit("childOpenChat", user_id);
    }
  },

  components: {}
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.member-visit-record {
  padding: 5%;

  .block-title {
    color: #202020;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
  }

  .record-list {
    margin-top: 1rem;

    .record-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.2rem;

      .avatar {
        width: 2.688rem;
        height: 2.688rem;
        border-radius: 50%;
      }

      .member-info {
        flex: 1;
        margin-left: 0.5rem;
        text-align: left;

        .member-nickname {
          max-width: 7rem;
          font-size: 0.813rem;
          color: #222;
        }

        .visit-num,
        .member-id {
          margin-left: 0.5rem;
          font-size: 0.688rem;
          color: #666;
        }

        .visit-num {
          margin: 0.5rem 0;
        }

        .view-record {
          font-size: 0.688rem;
          color: #0b8dfe;
        }
      }

      .open-chat-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.688rem;
        color: #fff;
        background-color: #0b8dfe;
        border-radius: 1rem;
        cursor: default;
      }
    }
  }
}
</style>
